<template>
	<view class="flex-col page">
		<view class="justify-center group">
			<image @click="Back()"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
				class="image" />
			<!-- <text class="text">订单详情</text> -->
		</view>

		<view class="flex-col section_1">
			<view class="flex-col">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
					class="image" @click="Back()" />
				<text class="text">{{bill.isSucess==1?'已开票':'开票中'}}</text>
			</view>
			<view class="justify-center group_1">
				<text class="text_1">已开发票金额：￥{{bill.money}}</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837663251321164.png"
					class="image_1" @click="go('/pages/my/bill/explainBill')" />
			</view>
		</view>
		<view class="flex-col section_2">
			<text class="text_2">增值税电子普通发票</text>
			<view class="flex-col items-center group_2">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837713811591184.png"
					class="image_2" />
				<view class="flex-row equal-division">
					<view class="flex-col items-center equal-division-item">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837692413997579.png"
							class="image_3" />
						<text class="text_3">订单完成</text>
					</view>
					<view class="flex-col items-center equal-division-item" v-if="bill.isSucess==1">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837692413997579.png"
							class="image_3" />
						<text class="text_3">开票完成</text>
					</view>
					<view class="flex-col items-center equal-division-item" v-else="bill.isSucess==0">
						<image src="/static/images/tabbar/openOk.png" class="image_3" />
						<text class="text_3">开票完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col section_3">
			<view class="flex-row">
				<text class="text_6">发票类型</text>
				<text class="text_7">电子普通发票</text>
			</view>
			<view class="flex-row group_6">
				<text class="text_8">发票内容</text>
				<text class="text_9">{{bill.content}}</text>
			</view>
			<view class="flex-row group_7">
				<text class="text_10">抬头类型</text>
				<text class="text_11">个人</text>
			</view>
			<view class="flex-row group_8">
				<text class="text_12">发票抬头</text>
				<text class="text_13">{{bill.rise}}</text>
			</view>
			<view class="flex-col group_9">
				<view class="flex-row">
					<text class="text_14">开票金额</text>
					<text class="text_15">￥{{bill.money}}</text>
				</view>
				<view class="flex-row group_11" v-if="bill.isSuccess == 0">
					<text class="text_16">开票时间</text>
					<text class="text_17">{{bill.invoicingTime|| '---'}}</text>
				</view>
				<view class="flex-row group_12">
					<text class="text_18">申请时间</text>
					<text class="text_19">{{bill.applyTime}}</text>
				</view>
			</view>
			<view class="flex-col group_13" v-if="bill.invoicingUrl">
				<view class="flex-row" @click="saveImg()">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837754137426812.png"
						class="image_6" />
					<text class="text_20">下载发票</text>
				</view>
				<image :src="bill.invoicingUrl" class="image_7" />
				<!-- <view v-else class="u-m-t-30 ">开票成功后在此处下载！</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if (option.hasOwnProperty('orderid')) {
				this.getBill(option.orderid)
				this.orderid = option.orderid;
			}

		},
		components: {},
		data() {
			return {
				orderid: '',
				bill: {},
				invoicingUrl: null,
			};
		},
		methods: {
			saveImg() {
				if (this.bill.isSucess == 1) {
					const downloadTask = uni.downloadFile({
						url: this.invoicingUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: "已保存至相册!",
											icon: "none",

										});
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								});
							}
						}
					});

					downloadTask.onProgressUpdate((res) => {
						console.log('下载进度' + res.progress);
						console.log('已经下载的数据长度' + res.totalBytesWritten);
						console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					});
				} else {
					uni.showToast({
						title: "请先联系开票",
						icon: "none"
					});
				}
			},
			Back() {
				uni.navigateTo({
					url: '/pages/my/order/order'
				});
			},
			getBill(orderid) {
				this.$http('bill.open', {
					ordersId: orderid
				}).then(r => {
					console.log(r);
					if (r.code == 200) {
						this.bill = r.data;
						this.invoicingUrl = r.data.invoicingUrl; //发票地址
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.equal-division-item {
		flex: 1 1 135.5px;
		padding: 5px 0;
	}

	.image_3 {
		filter: drop-shadow(0px 1.5px 1.5px #1d6aff33);
		width: 28px;
		height: 28px;
	}

	.text_3 {
		margin-top: 7px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.image {
		position: absolute;
		left: 35rpx;
		bottom: 12rpx;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 18px;
	}

	.group {
		z-index: 6;
		background-image: linear-gradient(to right, #5C74F8, #5E7FF8, #5E91F8);
		width: 100%;
		padding-top: 90rpx;
		padding-bottom: 10rpx;
		position: fixed;
		box-shadow: 0 1rpx 0 0 #64aff1;
	}

	.section_1 {
		padding: 53px 16px 49px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557837660497011444.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		margin-top: -19.5px;
		padding: 19px 51.5px 0;
		background-color: #ffffff;
		border-radius: 8px;
		position: relative;
	}

	.section_3 {
		margin-top: 10px;
		padding: 15px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.group_1 {
		margin-top: 23px;
	}

	.text_2 {
		align-self: center;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_2 {
		margin-top: 20.5px;
		padding: 19.75px 0 52.25px;
		position: relative;
	}

	.group_6 {
		margin-top: 19.5px;
	}

	.group_7 {
		margin-top: 19.5px;
	}

	.group_8 {
		margin-top: 19.5px;
	}

	.group_9 {
		margin-top: 19.5px;
	}

	.group_13 {
		margin-top: 20.5px;
	}

	.image {
		align-self: flex-start;
		width: 9.5px;
		height: 18px;
	}

	.text {
		margin-top: 6.5px;
		align-self: center;
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_1 {
		color: #ffffff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_1 {
		margin-left: 10.5px;
		width: 16px;
		height: 16px;
	}

	.image_2 {
		width: 118px;
		height: 1px;
	}

	.equal-division {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.text_6 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_7 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_8 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_9 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_10 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_11 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_12 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_13 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_11 {
		margin-top: 16.5px;
	}

	.group_12 {
		margin-top: 16.5px;
	}

	.image_7 {
		border-radius: 25rpx;
		margin-top: 12.75px;
		filter: drop-shadow(0px 1.5px 3.75px #0000000f);
		width: 702rpx;
		height: 454rpx;
	}

	.text_14 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_16 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_17 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_18 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_19 {
		margin-left: 11.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.image_6 {
		margin-top: 3.75px;
		width: 18px;
		height: 14.5px;
	}

	.text_20 {
		margin-left: 9px;
		margin-bottom: 1.75px;
		color: #381cc6;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}
</style>
